<template>
  <div id="base">
    <el-container>
      <el-aside class="left_bar" width="180px">
        <p>右侧标题栏</p>
      </el-aside>
      <el-main class="right_bar">
         <!-- 控制台+搜索 -->
        <el-row :gutter="20">
          <el-col :span="2">
            <el-button type="primary" round v-on:click="create_new_task">新增</el-button>
            <!-- 新增任务 -->
            <el-dialog title="新增任务" :visible.sync="if_show_create" width="30%" label-width="80px">
              <!-- 新增任务的界面 -->
              <el-form :model="create_form">
                <el-form-item label="证书编号">
                  <el-input class="form_item" v-model="create_form.certification_number"></el-input>
                </el-form-item>
                <el-form-item label="机构名称">
                  <el-input class="form_item" v-model="create_form.company_name"></el-input>
                </el-form-item>
                <el-form-item label="发证日期">
                  <el-date-picker
                    type="date"
                    style="width:20em"
                    placeholder="请选择发证日期"
                    class="form_item"
                    v-model="create_form.send_date"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="有效期至">
                  <el-date-picker
                    type="date"
                    style="width:20em"
                    placeholder="请选择有效日期"
                    class="form_item"
                    v-model="create_form.end_date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="发证机关">
                  <el-input class="form_item" v-model="create_form.send_company"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="if_show_create = false">取 消</el-button>
                <el-button type="primary" @click="addData">确 定</el-button>
              </div>
            </el-dialog>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" round v-on:click="update_task">编辑</el-button>
            <!-- 编辑界面 -->
            <el-dialog title="编辑任务" :visible.sync="if_show_update" width="30%" label-width="80px">
              <!-- 编辑任务的界面 -->
              <el-form :model="update_form">
                <el-form-item label="证书编号">
                  <el-input class="form_item" v-model="update_form.certification_number"></el-input>
                </el-form-item>
                <el-form-item label="机构名称">
                  <el-input class="form_item" v-model="update_form.company_name"></el-input>
                </el-form-item>
                <el-form-item label="发证日期">
                  <el-date-picker
                    type="date"
                    style="width:20em"
                    placeholder="请选择发证日期"
                    class="form_item"
                    v-model="update_form.send_date"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="有效期至">
                  <el-date-picker
                    type="date"
                    style="width:20em"
                    placeholder="请选择有效日期"
                    class="form_item"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    v-model="update_form.end_date"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="发证机关">
                  <el-input class="form_item" v-model="update_form.send_company"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="if_show_create = false">取 消</el-button>
                <el-button type="primary" @click="changeData">确 定</el-button>
              </div>
            </el-dialog>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" round>提醒设置</el-button>
          </el-col>
          <el-col :span="7" :offset="11">
            <el-input
              placeholder="请输入关键字进行查询"
              prefix-icon="el-icon-search"
              v-on:keyup.enter.native="beginToSearch"
              v-model="search_words"
              clearable
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="data_list">
          <el-table
            stripe
            :data="task_list"
            style="width: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column label="No" width="50"></el-table-column>
            <el-table-column label="证书编号" property="certification_number" width="180"></el-table-column>
            <el-table-column label="机构名称" property="company_name" width="180"></el-table-column>
            <el-table-column label="发证日期" property="send_date" width="150"></el-table-column>
            <el-table-column label="有效期至" property="end_date" width="150"></el-table-column>
            <el-table-column label="发证机关" property="send_company" width="180"></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </el-table-column>
          </el-table>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 记录修改的数据位置
      index: -1,
      if_show_create: false,
      if_show_update: false,
      task_list: [
        {
          certification_number: '001230',
          company_name: '嘉泽兴业',
          send_date: '2019-1-10',
          end_date: '2019-2-10',
          send_company: '嘉泽兴业'
        },
        {
          certification_number: '001231',
          company_name: '嘉泽兴业',
          send_date: '2019-1-10',
          end_date: '2019-2-10',
          send_company: '嘉泽兴业'
        }
      ],
      search_words: '',
      create_form: {
        certification_number: '',
        company_name: '',
        send_date: '',
        end_date: '',
        send_company: ''
      },
      update_form: {
        certification_number: '',
        company_name: '',
        send_date: '',
        end_date: '',
        send_company: ''
      }
    }
  },
  methods: {
    beginToSearch: function () {
      alert(this.search_words)
    },
    create_new_task: function () {
      this.if_show_create = !this.if_show_create
    },
    update_task: function () {
      this.if_show_update = !this.if_show_update
    },
    handleCurrentChange: function (val) {
      // console.log(val);
      // this.update_form=val;
      this.update_form.certification_number = val.certification_number
      this.update_form.company_name = val.company_name
      this.update_form.send_date = val.send_date
      this.update_form.end_date = val.end_date
      this.update_form.send_company = val.send_company
      this.task_list.forEach(element => {
        if (
          this.update_form.certification_number == element.certification_number
        ) {
          this.index = this.task_list.indexOf(element)
        }
      })
    },
    // 修改数据
    changeData: function () {
      this.update_task = false
      this.task_list[
        this.index
      ].certification_number = this.update_form.certification_number
      this.task_list[this.index].company_name = this.update_form.company_name
      var one = new Date(this.update_form.send_date)
      // 注意以下转换时间的方法
      this.task_list[this.index].send_date =
        one.getFullYear() + '-' + (one.getMonth() + 1) + '-' + one.getDate()
      one = new Date(this.update_form.end_date)
      this.task_list[this.index].end_date =
        one.getFullYear() + '-' + (one.getMonth() + 1) + '-' + one.getDate()
      this.task_list[this.index].send_company = this.update_form.send_company
    },
    // 新建数据
    addData: function () {
      this.if_show_create = false
      var newData = []
      newData.certification_number = this.create_form.certification_number
      newData.company_name = this.create_form.company_name
      newData.send_date = this.transformDate(new Date(this.create_form.send_date))
      newData.end_date = this.transformDate(new Date(this.create_form.end_date))
      newData.send_company = this.create_form.send_company
      this.task_list.push(newData)
      console.log(this.task_list)
    },

    transformDate: function (val) {
      return val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate()
    }
  }
}
</script>

<style>

.left_bar{
  background-color: transparent;
}

.right_bar{
  height: 100%;
}

.data_list {
  margin: 20px;
}

.form_item {
  width: 20em;
}
</style>
